<!DOCTYPE html>
<!-- saved from url=(0046)http://www.yangqq.com/web/css3demo/step12.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>CSS3圆环倒计时效果</title>
<style>
.main{
	width:200px;
	height:200px;
	margin:0 auto;
	}
.title{
	font-size:26px;
	color:#666;
	text-align:center;
	font-family:"微软雅黑";
	}

.pie { width:200px; height:200px; background-color:blue; border-radius:100px; position:absolute; }
.pie1 { clip:rect(0px,200px,200px,100px); -o-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); background:-moz-radial-gradient(20% 50% 0deg, #333, #0000ff); background:-webkit-gradient(radial, 100 100, 0, 100 100, 110, from(#000), to(#0000ff)); }
.pie2 { clip:rect(0px,100px,200px,0px); -o-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); background:-moz-radial-gradient(80% 50% 0deg, #333, #0000ff); background:-webkit-gradient(radial, 100 100, 0, 100 100, 110, from(#000), to(#0000ff)); }
.hold { width:200px; height:200px; position:absolute; z-index:1; }
.hold1 { clip:rect(0px,200px,200px,100px); }
.hold2 { clip:rect(0px,100px,200px,0px); }
.bg { width:200px; height:200px; background-color:red; border-radius:100px; position:absolute; box-shadow:0px 0px 8px #333; background:-moz-radial-gradient(0% 50% 0deg, #900, #ff0000); background:-webkit-gradient(radial, 100 100, 0, 100 100, 110, from(#900), to(#ff0000)); }
.time { width:160px; height:160px; margin:20px 0 0 20px; background-color:#fff; border-radius:100px; position:absolute; z-index:1; box-shadow:0px 0px 8px #333 inset; text-align:center; line-height:160px; font-family:"Book Antiqua", Palatino, serif; font-size:35px; font-weight:bold; text-shadow: 1px 1px 3px #333; }
.time em { background:#fff; position:absolute; top:62px; left:12px; height:18px; width:140px; opacity:0.4; }
</style>
</head>

<body>
<h1 class="title">CSS3圆环倒计时效果</h1>
<div class="main">
    <div class="hold hold1">
      <div class="pie pie1" style="-webkit-transform: rotate(360.000000000002deg);"></div>
    </div>
    <div class="hold hold2">
      <div class="pie pie2" style="-webkit-transform: rotate(358.200000000002deg);"></div>
    </div>
    <div class="bg"> </div>
    <div class="time"><span>09:26:02</span><em></em></div>
</div>

<script src="js/jquery-1.4.1.min.js"></script> 
<script src="js/main.js"></script> 



</body></html>